<script>
export default {
  name: 'baseDesigner',
}
</script>
<template>
  <div class="baseDesigner" @contextmenu.prevent>
    <div class="nav">
      <topNav
        :globalConfig="pageData"
        @updateScale="updateScale"
        @submit="handleSubmit"
        @preview="handlePreview"
        @canvas="handleCanvas"
        v-model="formData"
      ></topNav>
    </div>
    <div class="main">
      <div class="aside">
        <subassemblyPage> </subassemblyPage>
      </div>
      <div class="content">
        <designerLayout
          @resize="handleResize"
          :property="propertyData"
          :globalConfig="pageData"
          :scale="scale"
        ></designerLayout>
      </div>
      <div class="panel">
        <propertyPanel
          :formData="formData"
          :globalConfig="pageData"
          @updateProperty="updateProperty"
          @updateLayout="updateLayout"
          @updateGlobalConfig="updateGlobalConfig"
        ></propertyPanel>
      </div>
    </div>
    <design-preview
      v-model="dialogVisible"
      :title="options.title"
    ></design-preview>
    <DesignCanvas ref="designCanvasRef"></DesignCanvas>
  </div>
</template>
<script setup>
import propertyPanel from './components/propertyPanel.vue'
import topNav from './components/topNav.vue'
import subassemblyPage from './components/subassemblyPage.vue'
import designerLayout from './components/designerLayout.vue'
import { deepClone, getGcd } from './utils'
import { onMounted, ref, toRefs } from 'vue'
import useDesignStore from '@/store/modules/baseDesign'
import './components/css/global.scss'
import DesignCanvas from '@/components/DesignCanvas'

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        title: '布局01',
        resolutionRatio: [1920, 1080],
        griddling: 16,
        griddlingColor: '#409EFF',
      }
    },
  },
})
let { options } = toRefs(props)
let pageData = ref(deepClone(options.value))
let dialogVisible = ref(false)
let scale = ref()
let formData = ref({})
let propertyData = ref({})
let designCanvasRef = ref()
const emits = defineEmits(['submit'])
// 拖拽事件
let handleResize = res => {
  formData.value = res
}
// 更新属性栏事件
let updateProperty = res => {
  propertyData.value = res
}

let updateLayout = res => {
  propertyData.value = res
  formData.value = res
}
let updateGlobalConfig = res => {
  pageData.value = res
  useDesignStore().setBody(deepClone(res))
}
// 缩放更新
let updateScale = res => {
  scale.value = res
}
// 提交
let handleSubmit = () => {
  let body = useDesignStore().getBody
  let layoutList = useDesignStore().getLayoutList
  emits('submit', {
    body,
    layoutList,
  })
}
let handlePreview = () => {
  dialogVisible.value = true
}
let handleCanvas = () => {
  designCanvasRef.value.renderImage().then(res => {
    console.log(res)
  })
}
onMounted(() => {
  let gcd = getGcd(
    pageData.value.resolutionRatio[0],
    pageData.value.resolutionRatio[1],
  )
  pageData.value.radio = `${pageData.value.resolutionRatio[0] / gcd}:${pageData.value.resolutionRatio[1] / gcd}`
  useDesignStore().setBody(deepClone(pageData.value))
})
</script>
<style scoped>
.baseDesigner {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f8f8f8;
}
.nav {
  height: 60px;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #ccc;
  /* box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); */
}
.main {
  display: flex;
  width: 100%;
}
.aside {
  background: #fff;
  /* box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); */
}

.content {
  width: 100%;
}
.panel {
  padding: 0 4px;
  box-sizing: border-box;
}
</style>
